<template>
  <div class="yu-icon-warper" v-html="svgContent" @click="iconClick"></div>
</template>

<script setup lang="ts">
defineOptions({ name: 'yu-icon' })
import { withDefaults, computed } from 'vue'
import svgIcons from '@/views/package/assets/svg/icons'
const props = withDefaults(defineProps<{ name: string; size?: number; color?: string }>(), {
  size: 16,
  color: '#dcdfe6',
})
const svgContent = computed(() => {
  const svg = svgIcons[props.name]
  if (!svg) return ''
  const replacedSvg = svg
    .replace(/(width|height)="?\d+"/g, `width="${props.size}"`)
    .replace(/fill="[^"]*"/g, `fill="${props.color}"`)
  return replacedSvg
})
const emit = defineEmits(['click'])
const iconClick = () => {
  emit('click')
}
</script>

<style scoped>
.yu-icon-warper {
  display: flex;
  justify-content: center;
}
</style>